require("../../both/base.js")
require("./CourseFilesEdit.scss")

import Popup from "../../both/Popup/Popup.jsx"
const  PropTypes = React.PropTypes
import DataTable from "../DataTabel/DataTable.jsx"

class CourseFilesEdit extends React.Component{
    constructor(props){
        super(props)

        const {init,courseId} = this.props
        init(courseId)

        this.state = {
            modalState : false,
            title : "",
            location : ""
        }

        // this.addDisable = false
    }

    addCourseWrap(){
        if(this.addDisable){
            return
        }

        const {addCourse,courseId} = this.props
        const hideModal = this.hideModal.bind(this)

        if(this.state.title == "" || this.state.location == ""){
            toastr.warning("值不合法")
            return
        }

        addCourse({
            title : this.state.title,
            location : this.state.location,
            courseId : courseId
        })

        hideModal()
        toastr.success("添加成功")
        this.setState({
            title : "",
            location : ""
        })
    }

    showModal(){
        if(this.addDisable){
            return
        }

        this.setState({
            modalState : true
        })
        this.forceUpdate()
    }

    hideModal(){
        this.setState({
            modalState : false
        })
        this.forceUpdate()
    }

    titleInputChange(e){
        this.setState({
            title : e.target.value
        })
    }

    componentDidMount(){
        var self = this
        var uploader = this.uploader = WebUploader.create({
            auto: true,
            pick: '#filePicker',
            server: `${location.protocol}//${location.hostname}:${location.port}/postFile`
        })

        uploader.on('uploadSuccess', function(file, res) {
            toastr.success("文件上传成功")
            self.setState({
                location : res.url
            })
        })

        uploader.on( 'uploadError', function( file ) {
            toastr.error("文件上传失败")
            uploader.reset()
        })
    }

    refreshWrap(){
        var self = this
        const {courseId,refresh} = self.props

        refresh(null,courseId)
    }

    delItemWrap(id){
        var self = this

        return function(e){
            if(! confirm("你确认删除此附件吗？")){
                return
            }

            const {delFile} = self.props

            delFile(id)
        }
    }

    render(){
        let self = this

        const showModal = this.showModal.bind(this)
        const hideModal = this.hideModal.bind(this)
        const addCourseWrap = this.addCourseWrap.bind(this)
        const titleInputChange = this.titleInputChange.bind(this)
        const refreshWrap = this.refreshWrap.bind(this)

        const ths = ["附件id","附件名称","下载地址","操作"]

        // data trs
        const trs = self.props.courses.map((ele,idx) => {
            return <tr key={ele.id.toString()}>
                <td><div className="text-center item"><label>
                    <input id="radio_input_select" className="radio" type="checkbox" name="filter"/>
                    <span data-id={ele.id} className="radio_input"></span>
                </label></div></td>
                <td><div className="item">{ele.id}</div></td>
                <td><div className="item">{ele.title}</div></td>
                <td><div className="item"><a href={ele.location}>{ele.location}</a></div></td>
                <td><div className="item">
                    <div className="btn btn-danger" onClick={self.delItemWrap(ele.id)}>删除</div>
                </div></td>
            </tr>
        })

        return <div className="course_files_edit bln">
            {/*{解构传递}*/}
            <DataTable {...self.props}
                       ths={ths}
                       trs={trs}
                       searchPlaceHolder={"输入附件名称进行搜索"}
                       showModal={showModal}
                       addDisable={false}
                       editDisable={true}
                       selectDisable={false}
                       editHref="#"
                       refresh={refreshWrap}
            />

            <Popup show={this.state.modalState} title="添加课程" onOk={addCourseWrap} onCancel={hideModal}>
                <div className="modal_course_info_edit">
                    <ul className="modal_lists">
                        <li>
                            <span className="item_title">附件名称</span>
                            <span className="edit_area"><input type="text" className="input_edit_item" value={this.state.title} onChange={titleInputChange} /></span>
                        </li>
                        <li>
                                <span className="item_title">
                                    文件地址
                                </span>
                            <span className="edit_area">
                                <input type="text" className="input_edit_item file_location" value={this.state.location} disabled="disabled"/>
                                </span>
                        </li>
                        <li>
                            <span className="item_title">
                                    操作
                                </span>
                            <span className="edit_area">
                                <div className="btn btn-primary" id="filePicker">
                                        上传
                                </div>
                            </span>
                        </li>
                    </ul>
                </div>
            </Popup>

        </div>
    }
}

export default CourseFilesEdit